<template>
   <div id="firstpage">
       <slot name="all-header"></slot>
       <div class="firstpage-container">
          <el-card class="box-card">
              <div class="card-container">
                  <img class="avatar" src="../assets/avater.png" alt="">
                <div class="userinfo">
                    <div class="username">
                        {{userName}}
                    </div>
                    <div class="usertype">
                        {{userType}}
                    </div>
                </div>
               
                <div class="low-container">
                     <el-divider></el-divider>
                   <div class="timecontainer">
                       <div class="logintime">
                         登入時間:
                       </div>
                      <div class="time">
                      {{time}}
                       </div>
                  </div>
                  
                 </div>
              </div>
          </el-card>

          <el-card id="card-2" class="box-card">
               <el-calendar v-model="value">
              </el-calendar>
          </el-card>
          
          <el-card id="card-3" class="box-card">
             
          </el-card>


       </div>
   </div>
</template>

<script>
export default {
    name:'firstPage',
    data() {
        return {
            value:new Date(),
            time:'',

            userName:'',
            userType:'管理員',

            circleUrl:'../assets/.png',
            form:[{
               userid: 'danny'
             }
            
            ]
        }
    },
    methods: {
        setLoginTime(){
           let date=new Date();

           let year=date.getFullYear();
           let month=date.getMonth()+1;
           let day=date.getDate();
           let hours=date.getHours();
           let min=date.getMinutes();
           let sec=date.getSeconds();
           
           this.time=year+'/'+month+'/'+day+'  '+hours+':'+min+':'+sec
        },
        /**
         * @description 加載用戶數據.
         * @先判斷一下有沒有session
         * @直接調用checkSession
         * @有則直接加載session數據
         * @好似一定有
         */
     async  loadUserInfo(){
            this.checkSession();
            let that=this;
            if(this.userName=='')
            {
               return;
            }
            /*
            await this.$axios.get('http://localhost:8083/search?name='+this.userName+'&page=0&pageSize=9')
                  .then((result) => {
                      //console.log(result)
                     // that.userType='管理員'
                  })
                  */
        },

        /**---------------------------------------------------------------------- */
        /**
         * @description
         *             傳回用戶名給上一層...
         */
        sendName(){
            //console.log(this.userName)
            this.$emit('getUserName',this.userName);
        },

       /**---------------------------------------------------------------------- */
        
        /**
       * @description 
       * @檢查有沒有session
       * @有則轉到首頁并賦值
       * @沒則轉到login
       */
      
      async checkSession(){
         let obj=JSON.parse(localStorage.getItem('userInfo'))
         console.log(obj);
         let that=this;
         that.userName=obj.username
         /*
         await this.$axios.get('http://localhost:8081/checkLogin?sessionId='+obj.userSessionId)
               .then(res=>{
                 //這里是驗證有沒有過期
                 console.log(res)
                 if(res.data==false){
                    that.$router.push('/login')
                 }
                 that.userName=obj.username
                
                 
               })
       },
       */
         /**---------------------------------------------------------------------- */
         
         /**
          * 加載session數據....
          */
      } 
    },
    mounted() {
       
            this.setLoginTime();
            this.loadUserInfo();
            this.sendName();
            //this.checkSession();
            //this.loadSession();
        
    },
    
    watch:{
        /*
        userName:function(){
            this.sendName();
        }
        */
    }
}
</script>

<style>
   #firstpage{
    width: 100%;
    height: 740px;
   }
   .firstpage-container{
       height: 85%;
       padding: 20px;
       padding-top: 0px;
   }
   .box-card{
       width: 360px;
       height: 300px;
       float: left;
       margin-right: 25px;
   }
   .avatar{
       width: 150px;
       height: 150px;
       border-radius: 50%;
       float: left;
   }
   .card-container{
       width: 100%;
       padding: 10px;
       height: 360px;
       position: relative;
   }
   .userinfo{
       float:left;
       width: 140px;
       height: 150px;
       position: relative;
   }
   .username{
       padding-top: 50px;
       font-size: 25px;
       color: black;
   }
   .usertype{
       padding-top:5px;
       font-size: 18px;
       color: #A3AEBD;
   }
   .low-container{
       float: left;
       padding-top: 10px;
       width: 340px;
       height: 100px;
       position: relative;
   }
   .logintime{
       float: left;
       line-height: 20px;
       margin-right: 30px;
   }
   .time{
       float: left;
       line-height: 20px;
   }
   #card-2{
       width: 650px;
       height: 660px;
   }
   #card-3{
       position:absolute;
       bottom: 40px;

   }
</style>